<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>switch</title>

        <style>
			.body {
				overflow: hidden;
			}
			.sp_switch {
				background: grey;
				display: inline-block;
				width: 40px;
				height: 20px;
				border-radius: 20px;
				margin: 2px;
			}
			.sp_switch.sp_switch_off:before {
				content: '';
				display: inline-block;
				width: 24px;
				height: 24px;
				background: #eeeeee;
				border-radius: 50%;
				box-shadow: 0px 0px 1px 0px grey;
				transform: translateX(-2px) translateY(-2px);
			}
			.sp_switch.sp_switch_on:before {
				content: '';
				display: inline-block;
				width: 24px;
				height: 24px;
				transform: translateX(20px) translateY(-2px);
				background: #eeeeee;
				border-radius: 50%;
				box-shadow: 0px 0px 1px 0px grey;
			}
			.sp_switch.sp_switch_on{
				background: #e91e63;
			}
        </style>
    </head>

    <body class="body">
		<div>
			
		</div>
		<span class="sp_switch sp_switch_on"></span>
		<span class="sp_switch sp_switch_off"></span>
		
		<script type="text/javascript" src='./js/jquery.min.js'></script>
        <script>
			$('.sp_switch').on('click', function(){
				$(this).toggleClass('sp_switch_on');
				$(this).toggleClass('sp_switch_off');
			});
			let g_point = {
				x: 0,
				y: 0
			} 
			function touchStart(e){
				let touch = e.touches[0];
				g_point.x = touch.clientX;
				g_point.y = touch.clientY;
			}
			function touchEnd(e){
				e.preventDefault();
				let end = e.changedTouches[0];
				let x = end.clientX - g_point.x;
				let y = end.clientY - g_point.y;
				if(Math.abs(x) > Math.abs(y)){
					if(x > 0){
						console.log('向右')
					}else{
						console.log('向左')
					}
				}else{
					if(y > 0){
						console.log('向下')
					}else{
						console.log('向上')
					}
				}

				g_point = {
					x: 0,
					y: 0
				} 
			}
			let body = document.getElementsByTagName('body')[0];
			body.addEventListener('touchstart', touchStart, false);
			body.addEventListener('touchend', touchEnd, false);
        </script>
    </body>

</html>